import styled from 'styled-components';
import React, { CSSProperties, useState, useEffect } from 'react';
import { Card, Modal, Result } from 'antd';
import { ClearOutlined, DeleteOutlined, ShareAltOutlined, ImportOutlined, ExportOutlined, InfoCircleOutlined, EditOutlined, NodeIndexOutlined, ApartmentOutlined, PartitionOutlined, ProfileOutlined } from '@ant-design/icons';
import { confirm } from '@tauri-apps/plugin-dialog';

import { ToolsHeader } from '../../../components';
import { MainMetaDataDomainPanel, MainMetaDataDomainAction } from './meta-data-panels';
import { MetaDataDomain, metaDataGetMetaDomain } from '../../../services';
import { DomainEditor } from './domain-editor';
import { transformDomainClear, transformDomainDelete } from '@/services/local';

export interface MetaDataDomainPanelProps {
    style?: CSSProperties;
    domainIdentifier: string;
    onDomainChange?: (domainIdentifier: string) => Promise<void>;
}

export const MetaDataDomainPanel: React.FC<MetaDataDomainPanelProps> = (props) => {

    const [action, setAction] = useState<MainMetaDataDomainAction>('对象');

    const [isModalOpen, setIsModalOpen] = useState(false);

    const [selected, setSelected] = useState<MetaDataDomain | null>(null);

    return (
        <Container style={props.style}>
            <Header>
                <ToolsHeader
                    activeKey={action}
                    leftItems={[
                        {
                            key: '对象',
                            label: '对象',
                            icon: <PartitionOutlined />,
                        },
                        {
                            key: '关系',
                            label: '关系',
                            icon: <PartitionOutlined />,
                        },
                        {
                            divider: true,
                        },
                        {
                            key: '特性',
                            label: '特性',
                            icon: <PartitionOutlined />,
                        },
                        {
                            key: '功能',
                            label: '功能',
                            icon: <PartitionOutlined />,
                        },
                    ]}
                    centerItems={[
                        {
                            key: '编辑',
                            label: '编辑',
                            icon: <EditOutlined />,
                            isAction: true,
                        },
                        {
                            key: '清空',
                            label: '清空',
                            icon: <ClearOutlined />,
                            isAction: true,
                        },
                        {
                            key: '删除',
                            label: '删除',
                            icon: <DeleteOutlined />,
                            isAction: true,
                        }
                    ]}
                    rightItems={[
                        {
                            key: '导出',
                            label: '导出',
                            icon: <ExportOutlined />,
                        },
                        {
                            key: '分享',
                            label: '分享',
                            icon: <ShareAltOutlined />,
                        }
                    ]}
                    onChange={async (key: string, isAction?: boolean) => {
                        if (isAction) {
                            //删除
                            if (key === '清空') {
                                //提示框
                                const confirmed2 = await confirm('确定要清空该域下所有内容吗？', { title: '清空域', kind: 'warning' });
                                if (confirmed2) {
                                    //
                                    let result = await transformDomainClear([props.domainIdentifier]);
                                    if (result) {
                                        props.onDomainChange && props.onDomainChange(props.domainIdentifier);
                                    }
                                }
                            } else if (key === '删除') {
                                //
                                const confirmed2 = await confirm('确定要删除该域吗？', { title: '删除域', kind: 'warning' });
                                if (confirmed2) {
                                    //
                                    let result = await transformDomainDelete([props.domainIdentifier]);
                                    if (result) {
                                        props.onDomainChange && props.onDomainChange(props.domainIdentifier);
                                    }
                                }
                            } else if (key === '编辑') {
                                //
                                let domain = await metaDataGetMetaDomain(props.domainIdentifier);
                                setSelected(domain);
                                setIsModalOpen(true);
                            }
                        } else {
                            setAction(key);
                        }
                    }}></ToolsHeader>
            </Header>
            <Modal
                styles={{
                    content: {
                        minWidth: '600px',
                        minHeight: '400px'
                    }
                }}
                title="编辑域"
                footer={false}
                destroyOnClose={true}
                open={isModalOpen}
                onOk={async () => {
                    //刷新
                    setIsModalOpen(false);
                }} onCancel={async () => {
                    //刷新
                    setIsModalOpen(false);
                }}>
                <DomainEditor item={selected} onFinish={async () => {
                    //刷新
                    props.onDomainChange && await props.onDomainChange(props.domainIdentifier);
                    setIsModalOpen(false);
                }}></DomainEditor>
            </Modal>
            <MainMetaDataDomainPanel domainIdentifier={props.domainIdentifier} action={action} onDomainChange={props.onDomainChange}></MainMetaDataDomainPanel>
        </Container>
    );
}


const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;

const Header = styled.div`
    height: 45px;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DEDEDE;
    display: flex;
`;
